<html>
	<head>
	<meta charset="UTF-8">
	<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
        <link href="../../lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />  
    <!-- <script src="../../lib/jquery/jquery-1.5.2.min.js" type="text/javascript"></script>  -->
    <script src="http://www.ligerui.com/lib/ligerUI/js/core/base.js" type="text/javascript"></script>  
    <script src="http://www.ligerui.com/lib/ligerUI/js/plugins/ligerLayout.js" type="text/javascript"></script>  
	</head>
	<body>
		
        <div class="liger-treegrid" id="treegrid1" data="CustomersData" enabledEdit="true">
        <ul class="liger-treegrid-columns">
            <li name="CustomerID" width="200">CustomerID 
                    <input class="liger-treegrid-editor" ltype="text" />
            </li>
            <li name="CompanyName" width="200">CompanyName
                    <input class="liger-treegrid-editor" ltype="date" data-property="type:'checkbox'" />
            </li>
            <li display="Address">
                 <ul class="liger-treegrid-columns">
                     <li name="City" width="100">City</li>
                     <li name="Address" width="100">Address</li>
                     <li name="PostalCode" width="100">PostalCode</li>
                 </ul>
             </li>
         </ul>
         <div class= "liger-treegrid-detail"></div>
      </div> 
        
        
        
        
        
        
        
        
		<h2>列表-每页5条记录</h2>
		<table id="table">
			<tr>
				<td>Id</td>
				<td>名称</td>
				<td>年龄</td>
				<td>操作</td>
			<tr>
		<table>
		页码：<span id="page"></span>
		<br/>
		<br/>
		<br/>
		<h2>添加</h2>
		<div>
			<form id="addForm" action="add">
				名称：<input name="addName"></br>
				年龄：<input name="addAge"></br>
				<input id="addButton" type="submit" value="添加"  />
			</form>
		</div>

		
		
		<h2>修改</h2>
		<div>
			<form id="updateForm" action="update">
				id：<input name="updateId"></br>
				名称：<input name="updateName"></br>
				年龄：<input name="updateAge"></br>
				<input id="updateButton" type="submit" value="修改"  />
			</form>
		</div>
		
		
		
		<script>
		$(document).ready(function(){
		
			 $.get("query?pageNum=1&pageSize=5",function(data,status){
			 	$("#page").empty() ;
			 	$("#table").empty() ;
			   for( var i=1; i<=data.totalPage; i++)
			   {
			   	var href = "<a class='h' href='#'>"+i+"</a>&nbsp;&nbsp;&nbsp;" ;
			    $("#page").append( href ) ;
			   }
			 	$('.h').click(function(){
				   
				   	$("#table").empty() ;
				    $.get("query?pageNum="+$(this).text()+"&pageSize=5",function(data,status){
				  
					   $.each(data.list, function(index,val) {
					      console.info( val.age+val.name+val.id ) ;
					      var aaa = "<tr><td>"+val.id+"</td><td>"+val.name+"</td><td>"+val.age+"</td><td><a href=\"del?delId="+val.id+"\">删除</a></td><tr>" ;
					      $("#table").append( aaa ) ;
					    });
					 });		
				   
				   
				});
			 	
			   $.each(data.list, function(index,val) {
			      console.info( val.age+val.name+val.id ) ;
			      var aaa = "<tr><td>"+val.id+"</td><td>"+val.name+"</td><td>"+val.age+"</td><td><a href=\"del?delId="+val.id+"\">删除</a></td><tr>" ;
			      $("#table").append( aaa ) ;
			    });
			 });		
			 
		  	 
		});
		</script>
		
	</body>

</html>